<template>
  <div class="home">
    <div class="course_video_box">
      <!-- 水印 -->
      <div class="course_video_box" v-watermark="{ text: '测试水印', textColor: 'red' }"></div>
      <video :id="'player1'" class="course_video" ref="my_videos" preload="auto" playsinline webkit-playsinline></video>
    </div>

    <div class="other" v-watermark="{ text: '其他水印', textColor: 'red' }"></div>
  </div>
</template>

<script>
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css';
export default {
  name: 'HomeView',
  data() {
    return {};
  },
  created() {
    // console.log(this.username);
    // console.log(this.$store.state.user.username);
    // this.setName('李四');
    // this.generateRoutes();
    // this.$store.dispatch('permission/generateRoutes');
  },
  mounted() {
    this.setVideo();
  },
  methods: {
    setVideo() {
      this.player = TCPlayer('player1', {
        sources: [
          {
            src: 'https://1500005692.vod2.myqcloud.com/43843706vodtranscq1500005692/62656d94387702300542496289/v.f100240.m3u8'
          }
        ],
        licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1323277369_1/v_cube.license',
        licenseKey: '10d1a28c0b51babf7143d9ebff16fc0f'
      }); // player-container-id 为播放器容器 ID，必须与 html 中一致
      // 用户全屏添加水印
      this.player.on('fullscreenchange', () => {
        const videoDiv = document.getElementsByClassName('course_video')[0];
        videoDiv.appendChild(document.getElementsByClassName('course_video_box')[0]);
      });
    }
  },
  components: {}
};
</script>
<style lang="less" scoped>
.home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .course_video_box {
    width: 800px;
    height: 600px;
    position: relative;

    .course_video_box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      pointer-events: none;
    }
    .course_video {
      width: 100%;
      height: 100%;
    }
  }
  .other {
    width: 800px;
    height: 150px;
    border: 1px solid rebeccapurple;
    margin-top: 20px;
    position: relative;
  }
}
</style>
